<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>米醋儿分享看云模板分享免费下载</title>
    <meta name="description" content="仿看云模板免费下载" />
    <meta name="keywords" content="看云模板,仿看云,kancloud模板" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
        data-react-helmet="true" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" type="text/css" href="{:config('web.cdn')}/static/layui/css/layui.css">

    <link rel="stylesheet" href="{:config('web.cdn')}/static/index/editormd/css/style.css?t=20200724-17.13" />
    <link rel="stylesheet" href="{:config('web.cdn')}/static/index/editormd/css/editormd.css" />

    <link rel="stylesheet" type="text/css" href="{:config('web.cdn')}/static/css/style.css?t=20200916-1">
    {if request()->param("token")}
    {//第三方用户自动登录解决token存贮问题}
    <script>
        localStorage.setItem("token",'{:request()->param("token")}');
    </script>
    {/if}
    <script type="text/javascript" src="{:config('web.cdn')}/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="{:config('web.cdn')}/static/js/vue.js"></script>
    <script type="text/javascript" src="{:config('web.cdn')}/static/layui/layui.js"></script>
    <script type="text/javascript" src="{:config('web.cdn')}/static/js/jquery.lazyload.min.js"></script>
    <script type="text/javascript" src="{:config('web.cdn')}/static/js/functions.js?"></script>
    <script>
        //    百度统计代码开始
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?1de9b6d8081bed9226fe057cd7f9873c";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
        //    百度统计代码结束
        var token = localStorage.getItem("token");
    </script>
    <style>
        h1{
            flex: 1;
            margin-bottom: 15px;
            font-size: 20px;
            font-weight: 200;
            text-align: left;
            line-height: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #7e888b;

        }
    </style>

</head>

<body style="background: #fff !important;">


<!-- begin::main content -->
<main class="main-content">

        <div class="fly-panel fly-panel-user">
            <div class="layui-tab layui-tab-brief" lay-filter="user">

                <div class="layui-tab-content">
                    <div class="layui-form layui-form-pane layui-tab-item layui-show">
                        <form method="post" class="layui-form" onsubmit="return false">
                            <h1>{$res.title}</h1>
                            <input type="hidden" name="id" value="{$res.id}">
                            <div class="layui-form-item layui-form-text">

                                <div class="layui-input-block">
                                    <div id="test-editormd">
                                        <textarea name="info" id="info" style="width:98%;height:100%;visibility:hidden;resize:none;">{notempty name='$res'}{$res.info}{/notempty}</textarea>
                                    </div>
                                </div>
                            </div>
                            <!--当发布者为后台管理员时可以操作-->
                            <div class="layui-form-item">
                                <button class="layui-btn" key="set-mine" lay-submit lay-filter="info">提交保存</button>
                                <button class="layui-btn" key="set-mine" lay-submit lay-filter="draft">保存草稿</button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>

</main>

<script src="{:config('web.cdn')}/static/index/editormd/editormd.js"></script>

<script type="text/javascript">

    //图片上传js
    //md 编辑器
    var testEditor;
    $(function() {
        testEditor = editormd("test-editormd", {
            width           : "100%",
            height:'750px',
            // autoHeight      : true,
            path            : "{:config('web.cdn')}/static/index/editormd/lib/",
            imageUpload    : true,
            imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "{:url('Upload/mdeditor')}",
            htmlDecode      : "style,script,iframe",
            tex             : true,
            emoji           : true,
            taskList        : true,
            flowChart       : true,
            sequenceDiagram : true,
            onload : function() {
                // alert("onload");
                // this.setMarkdown("### onloaded");
                // console.log("onload =>", this, this.id, this.settings);
                //编辑器 拖拽上传
                var codeEditor = $(".CodeMirror")[0];
                codeEditor.ondragenter = function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log("dragenter");
                    return false;
                };
                codeEditor.ondragover = function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log("dragover");
                    return false;
                };
                codeEditor.ondrop = function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log("drop");
                    var files = e.dataTransfer.files // 这里获取到用户拖放的文件
                    console.log('333333333333333333333333');
                    console.log(files);
                    // 其中 ajaxUpload是Ajax上传文件的函数
                    // uploadUrl是后端提供的上传地址, uploadCallback是上传后的回调函数，用于生成代码片段并插入编辑器
                    ajaxUpload('{:url(\'Upload/mdeditor\')}', files, uploadCallback);
                    return false;
                };
            },
            onfullscreen : function() {
                $(".navbar").css("display","none");
                $("#CreateUsers").css("display","none");
                $(".KmoreInfo").css("display","none");
                //alert("onfullscreen");
                // console.log("onfullscreen =>", this, this.id, this.settings);
            },

            onfullscreenExit : function() {
                // alert("onfullscreenExit");
                $(".navbar").css("display","block");
                $("#CreateUsers").css("display","block");
                $(".KmoreInfo").css("display","block");
                // console.log("onfullscreenExit =>", this, this.id, this.settings);
            }
        });


        $("#append-btn").click(function(){
            $.get("{:config('web.cdn')}/static/index/editormd/test.md", function(md){
                testEditor.appendMarkdown(md);
            });
        });
    });
    //ajax 上传文件
    function ajaxUpload(uploadUrl, files, callback) {
        console.log("my ajax upload begin");
        console.log(files[0]);
        var formData = new FormData();
        formData.append('file', files[0]);
        // 可以添加其他需要传给后端的参数
        $.ajax({
            url: uploadUrl,
            type: 'POST',
            data: formData,
            cache: false,
            contentType: false,    //不可缺
            processData: false,    //不可缺
            dataType: 'json',
            success: function(data) {
                console.log("result:", data);
                callback(data);
            },
            complete: function(data) {
            }
        });

        return false;
    }

    function uploadCallback(data) {
        var url = data.url; // 依据后端返回的数据格式而定
        var link = url;
        if (!url) return false;

        var alt = "";
        var cm = testEditor; // myEditormd是用editormd函数创建的编辑器对象，这里假设myEditor是全局变量
        var cursor = cm.getCursor(); // 获取光标位置
        if (url.endsWith(".mp4")) { // 如果是是视频
            var videoHtml = '<video class="video-js" controls preload="auto" width="100%" poster="" data-setup=\'{"aspectRatio":"16:9"}\'>\
	<source src="' + url + '" type=\'video/mp4\' >\
	<p class="vjs-no-js">\
	To view this video please enable JavaScript\
	</p>\
	</video>';
            videoHtml = "\n" + videoHtml + "\n"; // videoHtml是生成的HTML视频代码片段
            cm.replaceSelection(videoHtml); // 插入到编辑器中
            cm.setCursor(cursor.line, cursor.ch + 2);
            return;
        }
        // 以下是对图片上传结果的处理，引用原image-upload插件的代码
        var altAttr = (alt !== "") ? " \"" + alt + "\"" : "";
        if (link === "" || link === "http://")
        {
            cm.replaceSelection("![" + alt + "](" + url + altAttr + ")");
        }
        else
        {
            cm.replaceSelection("[![" + alt + "](" + url + altAttr + ")](" + link + altAttr + ")");
        }

        if (alt === "") {
            cm.setCursor(cursor.line, cursor.ch + 2);
        }
    }

    layui.use('form', function(){
        var form = layui.form;
        //文章提交保存
        form.on('submit(info)', function(data){
            var url = "{:url('Document/save')}";
            layer.load();
            $.post(url,data.field,function (e) {
                if(e.code ==200){
                    success(e.msg);
                    setTimeout("location.reload()",2000);
                    layer.closeAll();
                }else {
                    layer.closeAll();
                    error(e.msg);
                }
            })
            return false;
        });
        form.on('submit(draft)', function(data){
            var temp = data.field;
            temp.status = 2; //草稿
            var url = "{:url('Document/save')}";
            $.post(url,temp,function (e) {
                if(e.code ==200){
                    success(e.msg);
                    setTimeout("location.reload()",2000);
                }else {
                    error(e.msg);
                }
            })

        });

        //ajax获取分类数据
        function getCate(pid,name,id){
            var url = "{:url('article/get_cate')}";
            $.post(url,{pid:pid},function (e) {
                //console.log(e)
                var html="";
                var data = e.data;
                html += '<select name="cate_id" id="'+name+'_id" lay-filter="'+id+'" lay-verify="required">';
                html += '<option value="">请选择</option>';
                for (var i = 0;i<data.length;i++){
                    html += "<option  value='"+data[i].id+"'>"+data[i].name+"</option>";
                }
                if(data.length > 0){
                    $("#"+id).html(html);
                }else {
                    $("#"+id).children().remove();
                }
                html += '</select>';
                form.render();
            })

        };
        getCate(0,'cate_id','cate1');

        //目前系统无三级分类，故二级即可实现需求
        form.on('select(cate1)', function(data){
            //console.log(data.elem); //得到select原始DOM对象
            //console.log(data.value); //得到被选中的值
            //console.log(data.othis); //得到美化后的DOM对象
            getCate(data.value,"cate_id",'cate2')
        });
    });

    /**
     * 粘贴上传图片
     */
    $("#test-editormd").on('paste', function (ev) {
        var data = ev.clipboardData;
        var items = (event.clipboardData || event.originalEvent.clipboardData).items;
        for (var index in items) {
            var item = items[index];
            if (item.kind === 'file') {
                var blob = item.getAsFile();
                var reader = new FileReader();
                reader.onload = function (event) {
                    var base64 = event.target.result;
                    //ajax上传图片
                    $.post("{:url('Upload/paste_up')}",{base:base64}, function (ret) {
                        layer.msg(ret.msg);
                        if (ret.code == 1) {
                            //新一行的图片显示
                            //editor.insertValue("\n![" + ret.data.title + "](" + ret.data.path + ")");
                            uploadCallback(ret);
                        }
                    });
                }; // data url!
                var url = reader.readAsDataURL(blob);
            }
        }
    });



</script>

</body>

</html>